<template>
  <div class="create-file-modal">
    <a-modal
      class="modal"
      wrapClassName="create-file-modal"
      :open="open"
      title="新建文件"
      @ok="clickOkCreateFile"
      @cancel="clickCancel"
      width="50%"
    >
      <div class="item">
        <div class="text">文件名称</div>
        <a-input
          class="input"
          placeholder="请输入"
          v-model:value="formCreateFile.fileName"
        >
        </a-input>
      </div>
      <div class="item" v-show="formCreateFile.isCreateTamplate === 1">
        <div class="text">文件类型</div>
        <a-select
          class="input"
          placeholder="请选择"
          v-model:value="formCreateFile.fileType"
        >
          <a-select-option value="xlsx">xlsx</a-select-option>
          <a-select-option value="docx">docx</a-select-option>
          <a-select-option value="pptx">pptx</a-select-option>
        </a-select>
      </div>
      <div class="item">
        <div class="text">是否新建模板</div>
        <a-radio-group
          class="input"
          v-model:value="formCreateFile.isCreateTamplate"
          @change="changeRadioGroup"
        >
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </div>
      <a-card title="模板列表" v-show="formCreateFile.isCreateTamplate === 2">
        <a-table
          class="table"
          :pagination="false"
          :columns="columns"
          :data-source="tableData"
          :row-selection="{
            type: 'radio',
            selectedRowKeys: selectedRowKeysTable,
            onChange: onSelectChange,
          }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <div class="operation">
                <a href="javascript:;" @click="clickOperation('下载', record)">
                  下载
                </a>
              </div>
            </template>
          </template>
        </a-table>
        <a-pagination
          v-model:current="formData.pageNum"
          v-model:pageSize="formData.pageSize"
          :total="formData.total"
          show-less-items
          @change="changePagination"
        />
      </a-card>
    </a-modal>
  </div>
</template>
<script setup>
  // 引入
  import {
    defineProps,
    defineEmits,
    h,
    watch,
    onMounted,
    onBeforeUnmount,
    ref,
  } from 'vue'
  import api from '@/axios/api'
  import commonMethod from '@/common-method/common-method'
  import { message } from 'ant-design-vue'
  const props = defineProps({
    open: {
      default: false,
    },
    info: {
      default: undefined,
    },
  })
  const emits = defineEmits(['cancel', 'updatePage'])
  // 数据
  const formData = ref({
    pageNum: 1,
    pageSize: 6,
    total: 0,
    fileType: undefined,
  }) //模板列表表单
  const columns = [
    { title: '文件名称', dataIndex: 'templateName' },
    { title: '创建人', dataIndex: 'createBy' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', dataIndex: 'operation' },
  ] //列表配置
  const tableData = ref([]) //表格数据
  const formCreateFile = ref({
    fileName: undefined,
    fileType: undefined,
    documentId: undefined,
    templateId: undefined,
    isCreateTamplate: 2,
  })
  const selectedRowKeysTable = ref([])
  // 生命周期
  onMounted(() => {
    getTemplateList(formData.value)
  })
  watch(
    () => props.info,
    (value) => {
      formCreateFile.value.documentId = value
    },
    {
      deep: true,
    }
  )
  // 方法
  //获取模板列表
  const getTemplateList = async (data) => {
    const res = await api.getTemplateList(data)
    console.log('获取模板列表', res)
    tableData.value = res.data.data.records.map((item) => {
      return { ...item, key: item.id }
    })
    formData.value.total = res.data.data.total
  }
  //文件批量下载
  const batchDownloadFiles = async (data) => {
    const res = await api.batchDownloadFiles(data)
    if (res.status === 200) {
      commonMethod.derive(res)
    } else {
      message.error(res.data.msg)
    }
  }
  //新建文件
  const createFile = async (data) => {
    const res = await api.createFile(data)
    console.log('新建文件', res)
    if (res.data.code === 200) {
      message.success('新建文件成功')
      emits('updatePage')
      clickCancel()
    } else {
      message.error('新建文件失败')
    }
  }
  //分页改变
  const changePagination = () => {
    getTemplateList(formData.value)
  }
  //点击表格操作
  const clickOperation = (value, record) => {
    if (value === '删除') {
      delTemplateList([record.id])
    } else if (value === '下载') {
      batchDownloadFiles({
        fileIds: [record.fileId],
        fileName: record.fileName,
      })
    }
  }
  //模板选择改变
  const onSelectChange = (selectedRowKeys) => {
    selectedRowKeysTable.value = selectedRowKeys
    formCreateFile.value.templateId = selectedRowKeys[0]
    console.log('模板选择改变', formCreateFile.value)
  }
  //单选按钮改变
  const changeRadioGroup = () => {
    if (formCreateFile.value.isCreateTamplate === 1) {
      formCreateFile.value.templateId = undefined
      selectedRowKeysTable.value = []
    } else if (formCreateFile.value.isCreateTamplate === 2) {
      formCreateFile.value.fileType = undefined
    }
  }
  //点击新建文件确定按钮
  const clickOkCreateFile = () => {
    console.log('点击确定按钮', formCreateFile.value)
    const { fileName, isCreateTamplate, fileType, templateId } =
      formCreateFile.value
    if (!fileName) {
      message.error('文件名称不能为空')
      return
    }
    if (isCreateTamplate === 1 && !fileType) {
      message.error('文件类型不能为空')
      return
    }
    if (isCreateTamplate === 2 && !templateId) {
      message.error('未选择模板')
      return
    }
    createFile(formCreateFile.value)
  }
  //点击对话框取消
  const clickCancel = () => {
    formCreateFile.value.fileName = undefined
    formCreateFile.value.fileType = undefined
    formCreateFile.value.templateId = undefined
    formCreateFile.value.isCreateTamplate = 2
    selectedRowKeysTable.value = []
    formData.value = {
      pageNum: 1,
      pageSize: 6,
      total: 0,
      fileType: undefined,
    }
    emits('cancel')
  }
</script>
<style lang="less" scoped>
  .create-file-modal {
    .modal {
      .item {
        display: flex;
        align-items: center;
        gap: (10 / @vw);
        margin-bottom: (20 / @vh);
        .text {
          width: (140 / @vw);
          text-align: right;
        }
        .input {
          width: (300 / @vw);
        }
      }
      .table {
        margin-bottom: (20 / @vh);
      }
    }
  }
</style>
